﻿var SliderControl = (function () {
    var Slider = Class.create({
        initialize: function (containerSelector) {
            var that = this;
            this.container = jQuery(containerSelector);
            this.offers = [];
            this.currentOfferIndex = 0;

            this.slideContainer = jQuery("<div></div>");
            this.slideContainer.attr("id", "slider-slide");

            this.titleContainer = jQuery("<div></div>");
            this.titleContainer.attr("id", "slider-title");

            this.container.on('click', function onSliderClick(ev) {
                if (!ev) ev = window.event;
                if (ev.target.id == "slider-next-arrow" || ev.target.id == "slider-previous-arrow") {
                    return;
                }

                var currentOffer = that.offers[that.currentOfferIndex];

                if (currentOffer instanceof OffersNS.Excursion) {
                    jQuery('a[data-id=excursion-link-tab]').click();
                }
                else if (currentOffer instanceof OffersNS.PackageHoliday) {
                    jQuery('a[data-id=holiday-link-tab]').click();
                }
                else if (currentOffer instanceof OffersNS.Cruise) {
                    jQuery('a[data-id=cruise-link-tab]').click();
                }
                else {
                    return;
                }

                jQuery('#' + currentOffer.id).click();
            });
        },

        addOffer: function (offer) {
            this.offers.push(offer);
        },

        render: function () {
            this.container.html("");

            this.renderSlide();
            this.renderTitle();
            this.renderNavigation();

            this.container.append(this.slideContainer);
            this.container.append(this.titleContainer);

            this.stopRotate();
            this.startRotate();
        },

        renderNavigation: function () {
            var that = this;
            var previousArrow = jQuery("<button></button>");
            previousArrow.attr("id", "slider-previous-arrow");
            previousArrow.on("click", function () {
                that.previousOffer();
                that.stopRotate();
                that.startRotate();
            });
            this.container.append(previousArrow);

            var nextArrow = jQuery("<button></button>");
            nextArrow.attr("id", "slider-next-arrow");
            nextArrow.on("click", function () {
                that.nextOffer();
                that.stopRotate();
                that.startRotate();
            });
            this.container.append(nextArrow);
        },

        renderSlide: function () {
            var that = this;
            this.slideContainer.fadeOut('slow', function () {
                that.slideContainer.css("backgroundImage", "url('" + that.offers[that.currentOfferIndex].imageUrl + "')");
            });
            this.slideContainer.fadeIn('slow');
        },

        renderTitle: function () {
            var price = '<span id="slider-offer-price">' + "Price: " + this.offers[this.currentOfferIndex].price / 2 +
                '€ / ' + this.offers[this.currentOfferIndex].price + 'lv.</span>';
            this.titleContainer.html(this.offers[this.currentOfferIndex].title + price);
        },

        nextOffer: function () {
            this.currentOfferIndex += 1;
            if (this.currentOfferIndex > this.offers.length - 1) {
                this.currentOfferIndex = 0;
            }

            this.renderSlide();
            this.renderTitle();
        },

        previousOffer: function () {
            this.currentOfferIndex -= 1;
            if (this.currentOfferIndex < 0) {
                this.currentOfferIndex = this.offers.length - 1;
            }

            this.renderSlide();
            this.renderTitle();
        },

        startRotate: function () {
            var that = this;
            if (this.rotator) {
                clearInterval(this.rotator);
            }
            this.rotator = setInterval(function () {
                that.nextOffer();
            }, 5000)
        },

        stopRotate: function () {
            clearInterval(this.rotator);
        },
    });

    return {
        Slider: Slider,
    };
}());